<template>
  <div class="calendar-container">
    <el-calendar>
      <template slot="dateCell" slot-scope="{date, data}">
        <div class="day-content-class">
          <template v-if="dateContents[formatDate(date)]">
            <div class="header-class">
              <div class="day-class">
                {{ formatDate(date) }}
              </div>
              <div class="handle-class">
                <el-button icon="el-icon-edit" size="mini" circle @click="handleDateClick(date)">
                </el-button>
              </div>
            </div>
            <div class="info-wrapper">
              <div
                v-for="(item, index) in dateContents[formatDate(date)]"
                :key="index"
                class="info-item"
              >
                <el-tooltip
                  class="tooltip-wrapper"
                  effect="dark"
                  :content="`工单：${item.workOrder}，产线：${item.productionLine}，排产量：${item.productionQuantity}`"
                  placement="top"
                >
                  <div class="content-container">
                    <span class="work-order">{{ item.workOrder }}</span>
                    <span class="production-line">{{ item.productionLine }}</span>
                    <span class="production-quantity" >{{ item.productionQuantity }}</span>
                  </div>
                </el-tooltip>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="header-class">
              <div class="day-class">
                {{ formatDate(date) }}
              </div>
              <div class="handle-class">
                <el-button icon="el-icon-edit" size="mini" circle @click="handleDateClick(date)">
                </el-button>
              </div>
            </div>
            <div class="no-work-class">
              <div class="icon-class"><i class="el-icon-date"></i></div>
              <div class="tips-class">
                暂无排产
              </div>
            </div>
          </template>
        </div>

<!--        <div class="date-cell-content" @click="handleDateClick(date)">
          <span>{{ formatDate(date) }}</span>
          &lt;!&ndash; 显示对应日期添加的内容，如果有内容则展示 &ndash;&gt;
          <div class="info-wrapper">
            <div
              v-for="(item, index) in dateContents[formatDate(date)]"
              :key="index"
              class="info-item"
            >
              <el-tooltip
                class="tooltip-wrapper"
                effect="dark"
                :content="`工单：${item.workOrder}，产线：${item.productionLine}，排产量：${item.productionQuantity}`"
                placement="top"
              >
                <div class="content-container">
                  <span class="work-order">{{ item.workOrder }}</span>
                  <span class="production-line">{{ item.productionLine }}</span>
                  <span class="production-quantity" >{{ item.productionQuantity }}</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>-->
      </template>
    </el-calendar>
    <el-dialog :visible.sync="dialogVisible"   v-dialogDrag title="添加内容" @close="resetForm">
      <el-form :model="formData" :rules="formRules" ref="form">
        <el-form-item label="工单" prop="workOrder">
          <el-input v-model="formData.workOrder"></el-input>
        </el-form-item>
        <el-form-item label="产线" prop="productionLine">
          <el-input v-model="formData.productionLine"></el-input>
        </el-form-item>
        <el-form-item label="排产量" prop="productionQuantity">
          <el-input v-model="formData.productionQuantity"></el-input>
        </el-form-item>
      </el-form>
        <div slot="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveContent">保存</el-button>
        </div>

    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      formData: {
        workOrder: '',
        productionLine: '',
        productionQuantity: ''
      },
      // 用于存储每个日期对应的添加内容，以日期为键，内容为值，这里假设内容是包含工单、产线、排产量信息的对象数组
      dateContents: {
        // 示例数据结构，你可以根据实际情况修改和添加更多日期对应的数据
        '2025-01-01': [
          { workOrder: '工单1', productionLine: '产线A', productionQuantity: '100' },
          { workOrder: '工单2', productionLine: '产线B', productionQuantity: '200' },
          { workOrder: '工单1', productionLine: '产线A', productionQuantity: '100' },
          { workOrder: '工单2', productionLine: '产线B', productionQuantity: '200' },
          { workOrder: '工单1', productionLine: '产线A', productionQuantity: '100' },
          { workOrder: '工单2', productionLine: '产线B', productionQuantity: '200' }
        ],
        '2025-01-10': [
          { workOrder: '工单1', productionLine: '产线A', productionQuantity: '100' },
          { workOrder: '工单2', productionLine: '产线B', productionQuantity: '200' },
          { workOrder: '工单1', productionLine: '产线A', productionQuantity: '100' },
          { workOrder: '工单2', productionLine: '产线B', productionQuantity: '200' },
          { workOrder: '工单1', productionLine: '产线A', productionQuantity: '100' },
          { workOrder: '工单2', productionLine: '产线B', productionQuantity: '200' }
        ]
      },
      // 表单验证规则
      formRules: {
        workOrder: [
          { required: true, message: '请输入工单内容', trigger: 'blur' }
        ],
        productionLine: [
          { required: true, message: '请输入产线内容', trigger: 'blur' }
        ],
        productionQuantity: [
          { required: true, message: '请输入排产量内容', trigger: 'blur' }
        ]
      },
      // 默认选中的日期（当前日期）
      defaultDate: new Date()
    };
  },
  methods: {
    handleDateClick(date) {
      // 明确记录当前点击的日期，方便后续保存内容等操作使用
      this.selectedDate = date;
      const formattedDate = this.formatDate(date);
      this.dialogVisible = true;
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    saveContent() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const formattedDate = this.formatDate(this.selectedDate);
          const newContent = {
            workOrder: this.formData.workOrder,
            productionLine: this.formData.productionLine,
            productionQuantity: this.formData.productionQuantity
          };
          if (!this.dateContents[formattedDate]) {
            // 使用 this.$set 创建新的数组属性
            this.$set(this.dateContents, formattedDate, []);
          }
          this.dateContents[formattedDate].push(newContent);
          // this.$set(this.dateContents, formattedDate, this.dateContents[formattedDate]);
          this.dialogVisible = false;
          this.resetFormData();
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.resetFormData();
      this.$refs['form'].resetFields();
    },
    resetFormData() {
      this.formData.workOrder = '';
      this.formData.productionLine = '';
      this.formData.productionQuantity = '';
    }
  }
};
</script>

<style scoped>
/deep/.el-calendar-day {
  height: 100%!important;
}
.calendar-container {
  height: 90vh; /* 根据实际情况设置合适的高度 */
  overflow-y: scroll;
}
/deep/.date-cell-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
/deep/.info-wrapper {
  overflow-y: scroll; /* 允许垂直方向滚动 */
  -webkit-overflow-scrolling: touch; /* 在移动端优化滚动体验 */
  scrollbar-width: none; /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none; /* IE 和 Edge 隐藏滚动条 */
}
/deep/.info-wrapper::-webkit-scrollbar {
  display: none; /* Chrome、Safari 等隐藏滚动条 */
}
/deep/.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  white-space: nowrap; /* 防止文本换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  overflow: hidden;
}
/deep/.tooltip-wrapper {
  display: flex;
  flex: 1;
}
/deep/.content-container {
  display: flex;
  flex: 1;
  justify-content: space-between;
}
/deep/.work-order {
  max-width: 33.33%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/.production-line {
  max-width: 33.33%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/.production-quantity {
  max-width: 33.33%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day-content-class {
  height: 150px;
  display: flex;
  flex-direction: column;
}

.header-class {
  flex: 1;
  display: flex;
  height: 28px;
  flex-direction: row;
  justify-content: space-between;
}

.day-class {
  flex: 4;
}

.handle-class {
  flex: 1;
}

.no-work-class {
  text-align: center;
  color: #cacaca;
  height: 100%;
  margin-top: 20px;
}

.icon-class {
  font-size: 20px;
  margin-bottom: 20px;
}

</style>
